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The Concept 

Using Template files with place holders 

The provided solution is based on layout template files. 

Those files use dedicated tags to set place holders for containers which contain the content 
components. 

At run-time the placeholders will be replaced with the actual components presenting their content 
while at design-time the placeholders will present content components representation to simulate 
the run-time presentation. 

The page general structure is determined by using html tags (like html <table>). 

The template files can contain any other html elements or additional code, which will be rendered 

and presented both at run-time and design-time. 

One file for both run-time and design-time 

Using the same layout template file for both run-time (presenting the actual page to the user) and 
design-time (editing the page content), provide create-once-use-twice solution and enables easy 
maintenance. 

This architecture ensures presenting exactly same page appearance both at run-time and at design- 
time. 



The Implementation 

Jsp layout template file with dedicated tag library tags 

The implementation uses jsp files as the layout templates. Such jsp file can contain any html, java, 
tag-lib or other jsp complying content, to be included in the portal page. 

The content components containers place holders are marked with a dedicated tag library, using the 
<lyt:container> tag. Such tag, located in the jsp, marks a place for a column of content 
components (Mews). 

Run-time and Design-time rendering 

The provided solution uses different <lyt:container> tag handler implementations for run-time and 
design-time. 

The run-time tag handler includes the content components' run-time generated content. 

The design-time tag handler paints a schematic run-time-look-alike representation of each content 

component with code enabling edit the page (adding, removing, re-locating components). 

All other jsp content is rendered the same. 
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Module Objective 

The Page Layout Module is in charge of constructing the full Portal Page HTML by retrieving the 
iViews content from the Page Builder and merging it into the wrapping layout template html to 
provided the desired page look and content arrangement. 

The Page Layout Module architecture supports flexibility in the content arrangement on the page 
by providing a template-based parameterized-controlled infrastructure for the pages layout 



Design Overview 

Terms in use 

JSP Template - A JSP file which defines a template for a page layout. Mainly contains HTM LB 
components and Layout TagLib components. 

Page Builder - The module in charge of building the page's POM, fetching the iviews data and 
calling the Layout Component to construct the full page. 

Layout Component - The main run-time engine for constructing page layout. A JSP Template 
based Portal Component that takes place in the page's POM. 

Main Content Storage - Component that holds and manages iViews data (content, tray) 
fetched or created by Page Builder. Layout Component reads data from the component, aka 
"Main Storage Container". 

Layout TagLib- (JSP) Tag Library in use within JSP Templates to serve Layout Component 
needs (i.e. - place holders for iViews Containers). 

iViews Container - A page layout entity which contains iViews that should be presented 
together, in a certain order, on the page (i.e. - one column of iviews) 

ILayoutStructure -Interface for getting page layout structure as containers 
and iviews arrangement on the page. 



definition. 
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Architecture and Core Behaviors 
General Architecture Description 

Remark - This section describes the key players and the general concept in the page layout and 
html creation. 




A pre-defined JSP Template holds a general structure for the page layout (i.e. - 
template for pages with 3 vertical columns) 

The Page Builder gets a request for a certain page and builds the required POM, which 
includes the page's iviews, and the Layout Component, which is an Abstract Portal 
Component, generated from the JSP Template. 

The Portal Component Profile for the Layout Component represents the page layout 
definitions as stored in the PCD. 

The Page Builder calls an ILayoutStructure object which translate the Layout Component 
profile to the requested semantic data (i.e. - the order the iviews should appear in the 
page). 

The Page Builder stores the iviews generated content in the Main Content Storage 
object. 

The Layout Component calls the Mews Containers tag handlers to include their iViews 
content in the necessary position in the page. 

Each tag handler calls the ILayoutStructure to get the list of the iViews it should include 
and then turns to the Main Content Storage to get the iViews data to include in the 
page. 
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The JSP Template 

A JSP file is used as a layout template for the page rendering. The file contains mainly HTMLB 
components (using HTMLB TagLib) and page layout specific objects (using Layout TagLib). 
Each portal page is associated with one of the pre-defined JSP Templates to set it's layout 
pattern. 

The EP will be provided with several Out-Of-The-Box JSP Templates (i.e. 2 columns page, 3 
columns Page etc.). The customer will be able to create new JSP Templates to serve his unique 
layout (and page template) specifications. 

At Run-Time the JSP Template, associated with the page, will be loaded by the PRT and added 
to the Page POM, as the Layout Component, under the Page Builder. 



The approach of establishing the Page Layout mechanism upon JSP Templates provide several 
benefits: 

• Flexibility - The template can be modified by the customer, thus creating any kind of 
layout template according to his needs (i.e. - a layout template of 



one row followed by three columns followed by another row I I ). 



. PRT supported - Being JSP based, the template is 'naturally' loaded and compiled as an 

AbstractPortalComponent and used in the Page POM. 
. HTMLB - Using HTMLB TagLib enables basing the template upon HTMLB components 

thus enjoying HTMLB rendering and styling services. 
. Devices - Optional approach to support different layouts for different devices can be 

using several device-oriented JSP Templates for the same page. 

HTMLB Grid Layout component is used as a primary component to set the page layout structure. 
The Layout TagLib 

Defines tags to be used in the JSP Templates to serve layout purposes. 
The module provide taglib definitions and tag-handlers implementation. 

The Container Tag 

A place-holder for Mews Container. 
Attributes: 

id - unique identifier for the container within this JSP Template. 

orientation - either Vertical' or 'horizontal'. Sets orientation for iViews arrangement within the 



container. 
Syntax: 

<lyt:container id="containerl" orientation="vertical" /> 
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JSP Template Code Example 

Example for three-columns-layout JSP Template 



<%@ taglib uri="prt : tagllb: tlhtmlb" prefix="hbj" %> 






<%8 taglib uri="prt: taglib: tllayout" prefix="lyt" %> 






<hbj:content id="myContext" > 






<hbj:page title="Portal Page"> 






<Hl>Two Columns Layout</Hl> 






<hb j : gridLayout id="myGridLayoutl" width="100% 






<hbj :gridLayoutCell rowIndex="l" columnIndex= 




'50%" 


vert icalAlignment=" top "> 






<lyt: container id="columnl" orientation= 


'vertical" 


/> 


</hbj :gridLayoutCell> 






<hbj :gridLayoutCell rowIndex="l" columnIndex= 




'50%" 


vert icalAlignment= "top "> 




/> 


<lyt: container id="column2" orientation= 




</hbj :gridLayoutCell> 






</hbj :gridLayout> 






</hbj :page> 






</hbj:content> 







The Container Tag Handler 

This Tag Handler writes the iViews' content to the page, according to their arrangement in the 
iViews Container. 

Handling Sequence 

1. Acquire reference to ILavoutStructure implementing object. 

2. Get List of iViews in Container (call ILayoutStructure:getContainerIViews). 

3. Acquire reference to Main Content Storage ( IContentStoraqe implementation). 

4. Create HTM LB GridLayout component. 

5. For each iView in the List of iViews - 

a. Create HTM LB GridLayoutCell component. 

b. Retrieve iView's content . 

c. Set GridLayoutCell content to iView's content. 

d. Add GridLayoutCell to GridLayout. 

6. Render GridLayout. 

The Orientation Property 

Property determines whether container should be presented as column (value = "vertical") or as 
row (value = "horizontal") of iviews. 

For vertical orientation the GridLayout will have one column and many rows (as iViews number). 
For horizontal orientation it will have one row and many columns. 

Container styling 

Html styles for the container will be affected by the wrapping html styles. There will be no 
specific styling attributes for the iViews Container in the JSP Template. 
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Key APIs 

Interface ILayoutStructure 

public interface ILayoutStructure 

Title: ILayoutStructure 
Description: Interface for getting page layout structure as containers and iviews 
arrangement on the page. 

Copyright (c) SAP Europe GmbH 2002 



Method Summary __ . 


java.util.List 


aetContainerlViewsfiava.lanq. String containerld) 

Get a list of iviews in a certain iViews Container, ordered by their 
rendering order on the page. 


java.util.List 


aetPaaelViewsn 

Get a list of all iviews in the Page, ordered by their rendering order on 
the page. 


java.util.List 


Get afiistof all iviews in the Page, ordered by their rendering order on 
the page. 



Method Pe 

getContainerlViews 
public java.util.List getContainerlViewsQava.lang.String containerld) 

Get a list of iviews in a certain iViews Container, ordered by their rendering order on the 
page. 

Parameters: 

containerld - The iViews Container ID. 
Returns: 

The iViews list. 
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getPagelViews 
public java.util.List getPageIViews() 

Get a list of all iviews in the Page, ordered by their rendering order on the page. Full iViews 
sequence will be returned, including iViews that apprears more than once in the page. 
Returns: 

The iViews List (including duplicates). 



getPagelViewsNoDuplicates 
public java.util.List getPageIViewsNoDuplicates() 

Get a list of all iviews in the Page, ordered by their rendering order on the page. iViews 
sequence will be returned, but with no duplicates, each iView will appear only once in the 
returned list. 
Returns: 

The iViews List (no duplicates). 
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Remarks 

• Provided the current PCD layout attributes structure, the implementing object might 
need to perform more initialisation actions as building a key-value mapping 
enumeration between container id in the JSP Template and container identifier in PCD. 
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Detailed Design 

Layout PCD Structure 

A Page context will have sub-context for each defined layout for the page. Each page will have 
one-primary layout (per device ?) which is the default layout presented to the user. The 
administrator can define alternative layouts for the user to choose from. 

Each Layout sub-context holds the following sets of properties (distinguished by name-space): 
. Iviews arrangement - stores iViews arrangement inside iViews Containers. 
• General Properties - admin defined properties to be used in JSP Template, 



Second container 



] I""""" - Iview4 ~j - 



Third container 



PCD Structure 



Title = "myLayout" Mapping between containers sequence on 

Containers arrangement the page and their id (as mentioned in the 

contl. id = "myContainerl" <^ JSP Template) . 

C0nt2.id = "myContainer2" Attribute name is contx where X represent 

cont3.id = "myLastContainer" the sec l uence - 

contl. title = "my Container 1" 1 ■ 

cont2. title = "my Container 2" 
cont3.title = "my Last Container" 



• Pagel 

o Layout 1 



IViews arrangement 
contl. ivul = "Iviewl" 
contl. ivu2 = "Iview2" 
cont2.ivul = "Iview3" 
cont2.ivu2 = "Iview4" 
cont3.ivul = "Iview5" 



Iviews arrangement inside containers. 
Attribute name is contXJvuY where contX 
is the container identifier and Y represents 
the ivu position in the iViews sequence in 
the container. 
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o Iview3 
o Iview4 
o Iview5 



activeLayout = Layoutl 



Updated design - 

<component name="pageLayout" > 

<component-profile> 

<property name="contl" value="headerContainer"> 

<property name="title" value="Header Area"/> 

<property name="ivul" value="pageBuilder.iview"/> 

<property name="ivu2" value="pageBuilder.iview"/> 
</property> 

<property name="cont2" value="navPanelContainer"> 

<property name="title" value="Navigation Panel"/> 

<property name="ivul" value="pageBuilder.iview"/> 

<property name="ivu2" value="pageBuilder.iview"/> 

<property name="ivu3" value="pageBuilder.iview"/> 
</property> 

<property name="cont3" value="workAreaContainer"> 
<property name="title" value="Work Area"/> 
<property name="ivul" value="pageBuilder,iview"/> 
</property> 
</cornponent-profile> 
</component> 

remark: cont names represent sequence. Editing layout (jsp) and changing containers sequence 
must be followed by cont names update in PCD/Profile. 
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Open Issues 

1. Frameset Support - special JSP Template ? actual page created ? special Layout Tags ? 
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